<template>
    <div class="mybook">
        <div class="book_bg">
            <div class="book_text_top">
                <van-nav-bar :title="this.bookname" left-text="返回" :right-text="this.chapterNameChange" left-arrow
                    @click-left="onClickLeft" @click-right="onClickRight" />
                <van-popup v-model="show" position="right" :style="{ height: '100%', width: '45%' }">
                    <!-- 右边弹出框 -->
                    <div @click=changeChapter(chaptersIDAll[index]) class="book_chapterNames"
                        v-for="(item, index) in chaptersNameAll" :key="index">{{ item }}</div>
                </van-popup>
            </div>
            <!-- 占位置 -->
            <div class="book_top_postion"></div>
            <div class="book_text" v-html="formattedText" @click="hid_all()"></div>

            <div class="book_foot">
                <div class="up_down" @click="hid_foot"></div>
                <div class="changecolor">
                    背景色
                    <ul>
                        <!-- <li style="background-color: wheat;" title="wheat" @click="changeColor"></li>
                        <li style="background-color: bisque;" title="bisque" @click="changeColor"></li>
                        <li style="background-color: slategrey;" title="slategray" @click="changeColor"></li>
                        <li style="background-color: darkgoldenrod;" @click="changeColor" title="darkgoldenrod"></li>
                        <li style="background-color: black;" title="black" @click="changeColor"></li> -->
                        <li v-for="(color, index) in colors" :key="index" :style="{ backgroundColor: color }"
                            :title="color" @click="changeColor(color)"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
/* 章节列表 */
.book_chapterNames {
    text-align: left;
    font-size: 12px;
    height: 8vh;
    line-height: 8vh;
    ;
    background-color: rgb(229, 229, 229);
    margin: 10px 5px;
    overflow: hidden;
}

.van-nav-bar__text {
    color: #000000;
}

.van-nav-bar .van-icon {
    color: #000000;
}

.van-nav-bar__right {
    font-size: 12px;
}

.van-popup--right {
    overflow: scroll;
}
</style>

<style lang="less">
.mybook {
    height: 100vh;
    width: 100vw;
    background-color: wheat;
    overflow: scroll;

    .book_bg {
        background-color: wheat;
        animation: all 1s;

        .book_text_top {
            height: 50px;
            width: 100vw;
            position: fixed;
            top: 0;
            background-color: rgb(255, 255, 255);
            border-bottom: 1px goldenrod solid;
        }

        .book_top_postion {
            height: 50px;
            width: 100vw;
        }

        .book_text {
            margin-top: 50px;
            background-color: wheat;
            height: 90vh;
            width: 90vw;
            margin: 0 5vw;
            text-align: left;
        }

        .book_foot {
            height: 100px;
            width: 100%;
            position: fixed;
            background-color: rgb(253, 255, 239);
            bottom: 0;

            .up_down {
                width: 80px;
                height: 6px;
                top: -6px;
                position: relative;
                margin: 0 auto;
                background-color: rgb(136, 136, 136);
                margin: 0 auto;
                border-radius: 12px;
            }

            .changecolor {
                text-align: center;
                font-size: 14px;

                ul {
                    display: flex;
                    width: 70vw;
                    margin: 0 15vw;

                    li {
                        width: 30px;
                        height: 30px;
                        margin: 0 auto;
                        border-radius: 50%;
                        padding: 0;
                    }
                }
            }
        }
    }

}
</style>
<!-- 调整文章字体等 -->
<style scoped>
h1 span {
    font-size: 18px;
}
</style>
<script>
import { bookCatalog } from "@/api/myindex";
import { bookContent } from "@/api/myindex";
export default {
    data() {
        return {
            arr: [],
            foothiden: false,
            all_hiden: false,
            show: false,
            colors: [
                "wheat",
                "bisque",
                "slategrey",
                "darkgoldenrod",
                "black"
            ],
            // 小说内容
            mytext: "正在全力加载中......",

            bookid: "",
            bookname: "",
            getText: "",

            // 拉取所有的章节列表数据
            chaptersAll: [],
            chaptersIDAll: [],
            chaptersNameAll: [],
            // 章节名称、章节id（可变）
            chapterNameChange: "章节列表",
            chapterIdChange: "",
        }
    },
    // 初始化
    created() {
        // 在初始化的时候 获取编辑推荐
        this.bookid = this.$route.query.id;
        this.bookname = this.$route.query.name;
        this.getmydata2();
    },
    methods: {
        // 按钮业务
        onClickLeft() {
            this.$router.back();
        },
        onClickRight() {
            this.show = true;
        },
        changeColor(i) {
            document.querySelector(".book_text").style.backgroundColor = i;
            document.querySelector(".book_bg").style.backgroundColor = i;
            document.querySelector(".mybook").style.backgroundColor = i;
            // 字体
            if (i == "black") {
                document.querySelector(".book_text").style.color = "#e5e1c0";
            }
            else {
                document.querySelector(".book_text").style.color = "black";
            }
        },
        hid_foot() {
            if (this.foothiden == false) {
                document.querySelector(".book_foot").style.bottom = "-100px";
                this.foothiden = true;
            }
            else {
                document.querySelector(".book_foot").style.bottom = "0px";
                this.foothiden = false;
            }
        },
        hid_all() {
            if (this.all_hiden == false) {
                document.querySelector(".book_text_top").style.display = "none";
                document.querySelector(".book_foot").style.display = "none";
                this.all_hiden = true;
            }
            else {
                document.querySelector(".book_text_top").style.display = "block";
                document.querySelector(".book_foot").style.display = "block";
                this.all_hiden = false;
            }
        },
        // 阅读业务
        // 获取章节列表数据
        async getmydata2() {
            console.log("尝试获取章节列表数据");
            try {
                // 调用接口
                const response1 = await bookCatalog({
                    source_uuid: this.bookid,
                });
                // 请求成功
                if (response1) {
                    console.log("请求章节列表成功！");
                    // console.log("---content>", response.ncx);
                    // 直接拉去第一卷的数据
                    this.chaptersAll = response1.data.catalog;
                    console.log(this.chaptersAll);
                    this.chaptersIDAll = response1.data.catalog.map(item => item.uuid);
                    this.chaptersNameAll = response1.data.catalog.map(item => item.title);
                    // 初始化显示第X章
                    this.start_text(this.chaptersIDAll[0]);
                }
            } catch (err) {
                // 请求失败
                console.log("请求失败,请刷新", err);
            }
        },
        // 获取章节内容
        async getmydata3(chapterIdChange) {
            console.log("尝试获取章节内容");

            try {
                // 调用接口
                const response = await bookContent({
                    // 书籍id
                    source_uuid: this.bookid,
                    // 章节id(变)
                    content_uuid: chapterIdChange
                });
                // 请求成功
                if (response) {
                    console.log("请求章节数据成功！");
                    console.log(response);
                    // 数据赋值
                    this.mytext = response.data.content;
                }
            }
            catch (err) {
                // 请求失败
                console.log("请求失败,请刷新", err);
                // 加上弹窗提示刷新即可
            }
        },
        changeChapter(id) {
            this.getmydata3(id);
        },

        // 初始化
        start_text(X) {
            if (this.chaptersIDAll.length > 0) {
                this.getmydata3(X);
                console.log(X);
            }
        }
    },

    computed: {
        formattedText() {
            return this.mytext.replace(/\n\n/g, '<br><br>');
        }
    },



};
</script>